<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- Vue生命周期的4个阶段8个钩子
    初始阶段 ： beforeCreate()  created()
    1，创建Vue实例vm（此时Vue实例已经完成创建，这是生命的起点）
    2，初始化事件对象和生命周期
    3，调用beforeCreate()钩子函数 （此时还无法通过vm去访问data对象的属性）
    4，初始化数据代理和数据监测
    5，调用created()钩子函数 （此时数据代理和数据监测创建完毕，已经可以通过vm访问data属性）
    6，编译模板语句生成虚拟DOM（此时虚拟DOM已经生成，但页面上还没有渲染）
    
    挂载阶段 ： beforeMount()   Mounted()
    1，调用beforeMount()钩子函数（此时页面还未渲染，真实DOM还未完成）
    2，给vm追加$el属性，用它来代替"el”，$el代表了真实DOM元素（此时真实DOM生成，页面渲染完成）
    3，调用mounted()钩子函数
    该阶段适合做什么？
    mounted：可以操作页面的DOM元素了

    更新阶段 ： beforeUpdate()  updated()
    1，data发生变化（这是该阶段开始的标志）
    2，调用beforeUpdate()钩子函数（此时只是内存中的数据发生变化，页面还未更新)
    3，虚拟DOM重新渲染和修补
    4，调用update()钩子函数（此时页面已更新）

    
    销毁阶段 ： beforeDestroy() destroyed()
    1，vm.$destroy()方法被调用（这是该阶段开始的标志）
    2，调用beforeDestroy()钩子函数（此时Vue实例还在，虽然vm上的监视器，vm上的子组件，vm上的自定义事件监听器还在等
    但是他们已经不能用了，此时修改data也不会重新渲染了）
    3，卸载子组件和监视器，解绑自定义事件监听器
    4，调用destroyed()钩子函数（虽然destroyed翻译为已销毁，但是此时Vue实例还在空间并没有释放，只不过马上就要
    释放了，这里的已销毁指的是vm对象上的所有东西都已经解绑完成了
    -->
    <div id="app">
        <h1>{{msg}}</h1>
        <h1>计算器：{{count}}</h1>
        <button @click="add">点我加一</button>
        <button @click="destroy">点我销毁</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 'Vue生命周期',
                count: 0
            },
            methods: {
                add() {
                    this.count++
                },
                destroy() {
                    this.$destroy()
                }
            },
            /**1，初始阶段
               el有，template也有最终编译template模板语句
               el有，template没有最终编译el模板语句
               el没有的时候，需要手动调用 vm.$mount(el)进行手动挂载，然后流程才能继续，此时如果template有，最终编译template模板语句
               el没有的时候，需要手动调用 vm.$mount(el)进行手动挂载，然后流程才能继续，此时如果没有template，最终编译el模板语句
              **/
            beforeCreate() {
                //创建前
                //创建前指的是：数据代理和数据监测的创建前
                //此时还无法访问data当中的数据，包括methods也是无法访问的
                console.log('beforeCreate', this.count);
            },
            created() {
                //创建后
                //创建后表示数据代理和数据监测创建完毕，可以访问data中的数据了
                console.log('created', this.count);
            },
            //挂载阶段
            //真实DOM生成
            beforeMount() {
                // 挂载前
                console.log('beforeMount');
            },
            mounted() {
                //挂载后
                console.log('mounted');
            },
            // 更新阶段
            //data变化重新渲染
            beforeUpdate() {
                //更新前指的是页面还没有渲染内存里面data数据改变了页面没有改变
                console.log('beforeUpdate');
            },
            updated() {
                //更新后
                console.log('updated');
            },
            // 销毁阶段
            //销毁阶段指的是将vm组件上所绑定的东西给解绑 
            //销毁vm指的是销毁监视器，子组件自定义事件监视器，自定义监听器

            beforeDestroy() {
                //销毁前 可以说是解绑前
                console.log('beforeDestroy');
            },
            destroyed() {
                //销毁后 可以说是解绑后
                console.log('destroyed');
            }
        })
    </script>
</body>

</html>